import {
  FC,
  useRef,
  RefObject,
  useEffect,
  CSSProperties,
  useState,
} from 'react';
import * as echarts from 'echarts/core';
import { TooltipComponent, GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
interface dataItem {
  name: string;
  data: number[];
}
const buildOptions = (
  dataSource: dataItem[],
  category: string[],
  barColors: string[] | echarts.graphic.LinearGradient[],
  textColors: string[],
  barWidth: number | string,
  shadowColor: string[],
) => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
    },
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: category,
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: 20,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: 20,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(58, 130, 202, .5)',
          },
        },
      },
    ],
    series: buildSeries(
      dataSource,
      barColors,
      textColors,
      barWidth,
      shadowColor,
    ),
  };
};
const buildSeries = (
  dataSource: dataItem[],
  barColors: string[] | echarts.graphic.LinearGradient[],
  textColors: string[],
  barWidth: string | number,
  shadowColor: string[],
) => {
  return dataSource.map((item: dataItem) => ({
    name: item.name,
    type: 'bar',
    barWidth: barWidth,
    data: item.data.map((row: number, index: number) => ({
      value: row,
      itemStyle: {
        color: barColors[index],
        // shadowColor: shadowColor[index] ? shadowColor[index] : (barColors[index] ? barColors[index] : 'rgba(0,0,0,0)'),
        // shadowOffsetY: -10,
      },
      label: {
        position: 'top',
        show: true,
        color: textColors[index] ? textColors[index] : barColors[index],
        fontSize: 20,
      },
    })),
    label: {
      show: true,
      position: 'top',
      color: '#fff',
    },
  }));
};

interface Iprops {
  width?: number;
  height?: number;
  style?: CSSProperties;
  category: string[];
  dataSource: dataItem[];
  barColors?: string[] | echarts.graphic.LinearGradient[];
  textColors?: string[];
  barWidth?: number | string;
  shadowColor?: string[];
}

const Bar: FC<Iprops> = (props) => {
  const {
    width = 800,
    height = 300,
    style,
    category,
    dataSource,
    barColors = [],
    textColors = [],
    shadowColor = [],
    barWidth = '40%',
  } = props;

  const chartRef = useRef() as RefObject<HTMLDivElement>;
  const [chart, setChart] = useState<echarts.ECharts>();

  useEffect(() => {
    const chartDom = chartRef.current as HTMLElement;
    const currentChart = echarts.init(chartDom);
    setChart(currentChart);
  }, []);

  useEffect(() => {
    chart &&
      chart.setOption(
        buildOptions(
          dataSource,
          category,
          barColors,
          textColors,
          barWidth,
          shadowColor,
        ),
      );
  }, [
    chart,
    dataSource,
    category,
    barColors,
    textColors,
    barWidth,
    shadowColor,
  ]);

  return (
    <div
      ref={chartRef}
      style={{
        ...style,
        width,
        height,
      }}
    ></div>
  );
};
export default Bar;
